/**
 * 选择器 统一管理
 * @param {Object} $ mui对象
 */
(function($) {
    $.init();
    /**
     * 处理日期 选择器
     */
    var dateBtns = $('.date-select');
    dateBtns.each(function(i, btn) {
        btn.addEventListener('tap', function() {
            var _self = this;
            if (_self.picker) {
                _self.picker.show(function(rs) {
                    _self.picker.dispose();
                    _self.picker = null;
                });
            } else {
                /**
                 * data-options 常规操作 API参考地址：http://dev.dcloud.net.cn/mui/ui/#dtpicker
                 * {} :默认年月日时分
                 * {"type":"date","beginYear":2014,"endYear":2016} :type指定类型,beginYear:开始年，endYear：结束年
                 * {"value":"2015-10-10 10:10","beginYear":2010,"endYear":2020} :设定选中的日期
                 * {"type":"date"} :指定类型
                 *  'datetime'	完整日期视图(年月日时分)
                 *	'date'	年视图(年月日)
                 *	'time'	时间视图(时分)
                 *	'month'	月视图(年月)
                 *	'hour'	时视图(年月日时)
                 */
                var optionsJson = this.getAttribute('data-options') || '{}';
                var options = JSON.parse(optionsJson);
                var id = this.getAttribute('id');
				/*
				 * 首次显示时实例化组件
				 * 示例为了简洁，将 options 放在了按钮的 dom 上
				 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
				 */
                _self.picker = new $.DtPicker(options);
                _self.picker.show(function(rs) {
					/*
					 * rs.value 拼合后的 value
					 * rs.text 拼合后的 text
					 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
					 * rs.m 月，用法同年
					 * rs.d 日，用法同年
					 * rs.h 时，用法同年
					 * rs.i 分（minutes 的第二个字母），用法同年
					 *
					 * 
					 * 返回 false 可以阻止选择框的关闭
					 * return false;
					 *
					 *
					 * 释放组件资源，释放后将将不能再操作组件
					 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
					 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
					 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
					 */
                    _self.value =rs.text;
                    _self.picker.dispose();
                    _self.picker = null;
                });
            }

        }, false);
    });

    /**
     * 处理数据 选择器
     */
    var recoreBtns = $('.record-select');
    recoreBtns.each(function(i, btn) {
        btn.addEventListener('tap', function() {
            var _self = this;
            if (_self.picker) {
                _self.picker.show(function(rs) {
                    _self.picker.dispose();
                    _self.picker = null;
                });
            } else {
                /**
                 * data-options 常规操作 API参考地址：http://dev.dcloud.net.cn/mui/ui/#dtpicker
                 * {} :默认年月日时分
                 * {"type":"date","beginYear":2014,"endYear":2016} :type指定类型,beginYear:开始年，endYear：结束年
                 * {"value":"2015-10-10 10:10","beginYear":2010,"endYear":2020} :设定选中的日期
                 * {"type":"date"} :指定类型
                 *  'datetime'	完整日期视图(年月日时分)
                 *	'date'	年视图(年月日)
                 *	'time'	时间视图(时分)
                 *	'month'	月视图(年月)
                 *	'hour'	时视图(年月日时)
                 */
                var optionsJson = this.getAttribute('data-options') || '{}';
                var options = JSON.parse(optionsJson);
                console.log(options);
                var id = this.getAttribute('id');
                console.log(id);
				/*
				 * 首次显示时实例化组件
				 * 示例为了简洁，将 options 放在了按钮的 dom 上
				 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
				 */
                _self.picker = new $.PopPicker();
                _self.picker.setData(options);
                _self.picker.show(function(rs) {
					/*
					 * 返回 false 可以阻止选择框的关闭
					 * return false;
					 *
					 *
					 * 释放组件资源，释放后将将不能再操作组件
					 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
					 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
					 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
					 */
                    document.querySelectorAll('.record-select')[i].querySelector('.record-select-data').value = _getParam(rs[0],'text');
                    _self.picker.dispose();
                    _self.picker = null;
                });
            }

        }, false);
    });

    /**
     * 处理数据二级联动选择器
     */
    var recoreBtns = $('.record-two-select');
    recoreBtns.each(function(i, btn) {
        btn.addEventListener('tap', function() {
            var _self = this;
            if (_self.picker) {
                _self.picker.show(function(rs) {
                    _self.picker.dispose();
                    _self.picker = null;
                });
            } else {
                /**
                 * data-options 常规操作 API参考地址：http://dev.dcloud.net.cn/mui/ui/#dtpicker
                 * {} :默认年月日时分
                 * {"type":"date","beginYear":2014,"endYear":2016} :type指定类型,beginYear:开始年，endYear：结束年
                 * {"value":"2015-10-10 10:10","beginYear":2010,"endYear":2020} :设定选中的日期
                 * {"type":"date"} :指定类型
                 *  'datetime'	完整日期视图(年月日时分)
                 *	'date'	年视图(年月日)
                 *	'time'	时间视图(时分)
                 *	'month'	月视图(年月)
                 *	'hour'	时视图(年月日时)
                 */
                var optionsJson = this.getAttribute('data-options') || '{}';
                var options = JSON.parse(optionsJson);
                console.log(options);
                var id = this.getAttribute('id');
                console.log(id);
				/*
				 * 首次显示时实例化组件
				 * 示例为了简洁，将 options 放在了按钮的 dom 上
				 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
				 */
                _self.picker = new $.PopPicker({
                    layer: 2
                });
                _self.picker.setData(options);
                _self.picker.show(function(rs) {
					/*
					 * 返回 false 可以阻止选择框的关闭
					 * return false;
					 *
					 *
					 * 释放组件资源，释放后将将不能再操作组件
					 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
					 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
					 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
					 */
                    document.querySelectorAll('.record-two-select')[i].querySelector('.record-two-select-data').value = _getParam(rs[0],'text');
                    _self.picker.dispose();
                    _self.picker = null;
                });
            }

        }, false);
    });


})(mui);


/**
 * 根据传入的键获取json对象的内容
 * @param {Object} obj 对象
 * @param {Object} param 键
 */
var _getParam = function(obj, param) {
    return obj[param] || '';
};

/*
 * 多文件预览,上传,删除
 * @param  obj {obj} 文件上传的设置
 */
function FFile(obj) {
    this.FileSet = {
        name: obj.name? obj.name:null,								//唯一名,用来与其他文件区分
        fileInput: obj.fileInput?obj.fileInput: null,				//html file控件
        upButton: obj.upButton? obj.upButton:null,					//提交按钮
        pre: obj.pre?obj.pre:null,									//预览地址
        url: obj.url? obj.url:null,									//ajax地址
        fileFilter: [],					                            //过滤后的文件数组
        filter: obj.filter?obj.filter:function(files){
            var arrFiles = [];
            for (var i = 0, file; file = files[i]; i++) {
                if (file.type.indexOf("image") == 0) {
                    arrFiles.push(file);
                } else {
                    alert('文件"' + file.name + '"不是图片。');
                }
            }
            return arrFiles;
        },	                                        			    //过滤的文件,默认判断如果是图片可以加入临时数组
        onSuccess: obj.onSuccess?obj.onSuccess:function(data){
            console.log('success');
        },	                                                    	//文件上传成功时
        onFailure: obj.onFailure?obj.onFailure:function(data){
            console.log('error');
        },	                                                    	//文件上传失败时,
        onComplete: obj.onComplete?obj.onComplete:function(){
            console.log('complete');
        },
    }
    this.init();
}
FFile.prototype = {
    //获取选择文件，file控件或拖放
    funGetFiles: function(e) {
        // 获取文件列表对象
        var files = e.target.files || e.dataTransfer.files;
        //继续添加文件
        this.FileSet.fileFilter = this.FileSet.fileFilter.concat(this.FileSet.filter(files));
        this.funDealFiles();
        return this;
    },

    //选中文件的处理与回调
    funDealFiles: function() {
        for (var i = 0, file; file = this.FileSet.fileFilter[i]; i++) {
            //增加唯一索引值
            file.index = i;
        }
        //执行选择回调
        this.onSelect(this.FileSet.fileFilter);
        return this;
    },
	/*
	 * 对保存在fileFilter的图片,生成预览
	 * @param file {array} 传递进来的含有所有file的数组
	 */
    onSelect: function(files) {
        var html = '',
            self = this,
            i = 0;
        $(this.FileSet.pre).html();//清空预览地址
        var funAppendImage = function() {
            file = files[i];

            if (file) {
                var reader = new FileReader()
                reader.onload = function(e) { //生成的图片
                    html += '<div id="js-uploadList_'+self.FileSet.name+i+'" class="img-box">';
                    html += 	'<div class="img-border">';
                    html += 		'<span class="js-upload_delete icon-delete_fill red" data-index="'+ i +'"></span>';
                    html += 		'<img src="'+e.target.result+'"></img>';
                    html +=		'</div>';
                    html += '</div>';

                    i++;
                    funAppendImage();
                }
                reader.readAsDataURL(file);
            } else {
                $(self.FileSet.pre).html(html);
                if (html) {
                    //删除方法
                    $(".js-upload_delete").click(function() {
                        self.funDeleteFile(files[parseInt($(this).attr("data-index"))]);
                        return false;
                    });
                }
            }
        };
        funAppendImage();
    },
    //删除对应的文件
    funDeleteFile: function(fileDelete) {
        var arrFile = [];
        for (var i = 0, file; file = this.FileSet.fileFilter[i]; i++) {
            if (file != fileDelete) {
                arrFile.push(file);
            } else {
                this.onDelete(fileDelete);
            }
        }
        this.FileSet.fileFilter = arrFile;
        return this;
    },
	/*
	 *删除函数
	 *@param fileDelete {str} 传递过来要删除的File
	 */
    onDelete: function(file){//清除图片
        var self = this;
        $("#js-uploadList_" + self.FileSet.name+ file.index).remove();
    },
    //文件上传
    funUploadFile: function() {
        var self = this;
        if (location.host.indexOf("sitepointstatic") >= 0) {
            //非站点服务器上运行
            return;
        }
        for (var i = 0, file; file = this.FileSet.fileFilter[i]; i++) {
            (function(file) {
                var formData = new FormData();
                formData.append(self.FileSet.name,file);
                $.ajax({
                    url: self.FileSet.url,
                    type: 'post',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        self.FileSet.onSuccess(data);
                        self.funDeleteFile(file);
                    },
                    error: function(data) {
                        self.FileSet.onFailure(data);
                    }
                })
                if(!self.FileSet.fileFilter.length){
                    //执行完成
                    self.FileSet.onComplete();
                }
            })(file);
        }

    },

    init: function() {
        var self = this;
        //判断必须参数是否为空
        if(self.FileSet.fileInput == null || self.FileSet.pre == null || self.FileSet.upButton == null) {
            console.log('必须提供 input的id 预览区的id 以及 button的id');
            return false;
        }
        //文件选择控件选择
        if (self.FileSet.fileInput) {
            // self.FileSet.fileInput.addEventListener("change", function(e) { self.funGetFiles(e); }, false);
            $(self.FileSet.fileInput).on('change',function(e){
                self.funGetFiles(e);
            })
        }

        //上传按钮提交
        if (self.FileSet.upButton) {
            // self.FileSet.upButton.addEventListener("click", function(e) { self.funUploadFile(e); }, false);
            $(self.FileSet.upButton).on('click', function(e) {
                self.funUploadFile(e);
            })
        }
    }
}